﻿@page "/bar/bar1"
@using Blazor.ECharts.Options
@using Blazor.ECharts.Options.Enum
@using B = Blazor.ECharts.Options.Series.Bar

<div class="chart-container">
    <EBar Option="@Option1" Class="chart-fill"></EBar>
</div>

@code{
    private EChartsOption<B.Bar> Option1;

    protected override void OnInitialized()
    {
        base.OnInitialized();

        Option1 = new()
        {
            Color = new[] { "#8EC9EB" },
            Legend = new() { Data = "高度(km)与气温(°C)变化关系" },
            Tooltip = new()
            {
                Trigger = TooltipTrigger.Axis,
                Formatter = "Temperature : <br/>{b}km : {c}°C"
            },
            Grid = new()
            {
                new() { Left = "3%", Right = "4%", Bottom = "3%", ContainLabel = true }
            },
            XAxis = new()
            {
                new() { Type = AxisType.Value, SplitLine = new SplitLine() { Show = false }, AxisLabel = new AxisLabel() { Formatter = "{value} °C" } }
            },
            YAxis = new()
            {
                new() { Type = AxisType.Category, AxisLine = new AxisLine() { OnZero = false }, AxisLabel = new AxisLabel() { Formatter = "{value} km" }, BoundaryGap = true, Data = new[] { "0", "10", "20", "30", "40", "50", "60", "70", "80" } }
            },
            Series = new()
            {
                new B.Bar()
                {
                    Name = "高度(km)与气温(°C)变化关系",
                    Smooth = true,
                    BarCategoryGap = 25,
                    LineStyle = new { normal = new { width = 3, shadowColor = "rgba(0,0,0,0.4)", shadowBlur = 10, shadowOffsetY = 10 } },
                    Data = new[] { 15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5 }
                }
            },
            Graphic = new()
            {
                new GraphicImage()
                {
                    Id = "logo",
                    Right = 20,
                    Top = 20,
                    Z = -10,
                    Bounding = "raw",
                    Style = new()
                    {
                        Image = "http://echarts.baidu.com/images/favicon.png",
                        Width = 150,
                        Height = 150,
                        Opacity = 0.4
                    }
                },
                new GraphicGroup()
                {
                    Rotation = Math.PI / 4,
                    Bounding = "raw",
                    Right = 110,
                    Bottom = 110,
                    Z = 100,
                    Children = new()
                    {
                        new
                        {
                            type = "rect",
                            left = "center",
                            top = "center",
                            z = 100,
                            shape = new
                            {
                                width = 400,
                                height = 50
                            },
                            style = new
                            {
                                fill = "rgba(0,0,0,0.3)"
                            }
                        },
                        new
                        {
                            type = "text",
                            left = "center",
                            top = "center",
                            z = 100,
                            style = new
                            {
                                fill = "#fff",
                                text = "ECHARTS BAR CHART",
                                font = "bold 26px Microsoft YaHei"
                            }
                        }
                    }
                },
                new GraphicGroup()
                {
                    Left = "10%",
                    Top = "center",
                    Children = new()
                    {
                        new
                        {
                            type = "rect",
                            z = 100,
                            left = "center",
                            top = "middle",
                            shape = new
                            {
                                width = 190,
                                height = 90
                            },
                            style = new
                            {
                                fill = "#fff",
                                stroke = "#555",
                                lineWidth = 2,
                                shadowBlur = 8,
                                shadowOffsetX = 3,
                                shadowOffsetY = 3,
                                shadowColor = "rgba(0,0,0,0.3)"
                            }
                        },
                        new
                        {
                            type = "text",
                            z = 100,
                            left = "center",
                            top = "middle",
                            style = new
                            {
                                fill = "#333",
                                text = string.Join("\n", new[]{
                                    "横轴表示温度，单位是°C",
                                    "纵轴表示高度，单位是km",
                                    "右上角有一个图片做的水印",
                                    "这个文本块可以放在图中各",
                                    "种位置"
                                }),
                                font = "14px Microsoft YaHei"
                            }
                        }
                    }
                }
            }
        };
    }
}